var curPageIdx = 3;
// 主播
curMenuType = 1;
curMenuIdx = 0;
 // header跳转的页面
    var headerUrls = ['../index/index.html','../arena/arena.html','../famous_part/famous-part.html','../class/classDetail.html','../my/Record.html'];
// 当前主播id
var curAnchorId = parseInt(getParam('curAnchorId'));
// 当前leftmenu位置
var focusLiIdx = parseInt(getParam('focusLiIdx'));
var curIcon = getParam('curIcon');
var topName = getParam('topName');

// 记录当前2个滚动区域的id
var firRowIds = ['video_content','album_content'];
// 记录当前2个container的id
var speContainerIDs = ['video_container','album_container'];

if(focusLiIdx && focusLiIdx!=0){
    curMenuIdx = 1;
    getObjById(speContainerIDs[0]).style.display = "none";
    getObjById(speContainerIDs[1]).style.display = "block";
}else{
    getObjById(speContainerIDs[0]).style.display = "block";
    getObjById(speContainerIDs[1]).style.display = "none";
}

// 上个页面标签栏拿过来的头像和名字
if(curIcon){
    getObjById("iconImg").src = curIcon;
}

if(topName){
    getObjById("topName").innerHTML = topName;
}

// 精选专辑
var bestAlbumJson = [
    {'title': '零度', 'img': '../image/anchor/anchor1.png'},
    {'title': '瓶子', 'img': '../image/anchor/anchor2.png'},
    {'title': '美人鱼头' ,'img': '../image/anchor/anchor3.png'},
    {'title': '板娘', 'img': '../image/anchor/anchor4.png'},
    {'title': '小苍', 'img': '../image/anchor/anchor5.png'},
    {'title': '零度', 'img': '../image/anchor/anchor1.png'},
    {'title': '瓶子', 'img': '../image/anchor/anchor2.png'},
    {'title': '美人鱼头' ,'img': '../image/anchor/anchor3.png'},
    {'title': '板娘', 'img': '../image/anchor/anchor4.png'},
    {'title': '小苍', 'img': '../image/anchor/anchor5.png'}
];

// ,
//     {'title': '零度', 'img': '../image/anchor/anchor1.png'},
//     {'title': '瓶子', 'img': '../image/anchor/anchor2.png'},
//     {'title': '美人鱼头' ,'img': '../image/anchor/anchor3.png'},
//     {'title': '板娘', 'img': '../image/anchor/anchor4.png'},
//     {'title': '小苍', 'img': '../image/anchor/anchor5.png'},
//     {'title': '美人鱼头' ,'img': '../image/anchor/anchor3.png'},
//     {'title': '板娘', 'img': '../image/anchor/anchor4.png'},
//     {'title': '小苍', 'img': '../image/anchor/anchor5.png'},


        

// 所有视频
var allVideoJson = [
	{id: 0, title :'2018王者荣耀KPL春季赛预选赛 QGhappy vs eStar', img: '../image/test/video1.png'},
    {id: 1, title :'【鱼嘴滑舌】盘点 第12期：哪些影响有真实伤害', img: '../image/test/video1.png'},
    {id: 2, title :'【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', img: '../image/test/video1.png'},
    {id: 3, title :'【上分拍档】第24期：弈星+苏烈控场法王一招致胜', img: '../image/test/video1.png'},
    {id: 4, title :'【破冰英雄】盘点 第12期：哪些影响有真实伤害', img: '../image/test/video1.png'},
    {id: 5, title :'【上分拍档】第24期：弈星+苏烈控场法王一招致胜', img: '../image/test/video1.png'},
    {id: 6, title :'2018王者荣耀KPL春季赛预选赛 QGhappy vs eStar', img: '../image/test/video1.png'},
    {id: 7, title :'【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', img: '../image/test/video1.png'},
    {id: 8, title :'2018王者荣耀KPL春季赛预选赛 QGhappy vs eStar', img: '../image/test/video1.png'},
    {id: 9, title :'【鱼嘴滑舌】盘点 第12期：哪些影响有真实伤害', img: '../image/test/video1.png'},
    {id: 10 ,title :'【鱼嘴滑舌】第89期：无畏战车狂铁，极限反击以一敌五', img: '../image/test/video1.png'},
    {id: 11 ,title :'【上分拍档】第24期：弈星+苏烈控场法王一招致胜', img: '../image/test/video1.png'},
];

initAlbumContent();
initVideoContainer();

function initVideoContainer(){
    var videoContent = document.getElementById('video_content')
    var allItem = ''
    var allVideosRow = Math.ceil(allVideoJson.length / 4);
    var allVideos_innerHtml = '';
    for(var i = 1; i <= allVideosRow; i++){
        allVideos_innerHtml += '<div ican="row" ican-rev="true" id="allVideo_'+ i +'" class="videoList"></div>';
    }
    // document.getElementById('video_content').innerHTML = allVideos_innerHtml;

    for(var j = 1; j <= allVideoJson.length; j++){
        var curRowIdx = Math.ceil(j/4);
        var curDivID = 'allVideo_' + curRowIdx;
        allItem += '<div ican="true" id="all_video_list_'+ j +'" class="videoItem" style="background-image:url('+ allVideoJson[j-1]['img'] +')"><div class="cover"><div class="align_word">'+ allVideoJson[j-1]['title'] +'</div></div></div>';
    }

    videoContent.innerHTML = allItem
}


function initAlbumContent(){
    var albumsRow = Math.ceil(bestAlbumJson.length / 5);
    var albumContent = document.getElementById('album_content')
    var albums_innerHtml = '';
        for(var i = 1; i <= albumsRow; i++){
        albums_innerHtml += '<div ican="row" id="album_'+ i +'" class="albumList"></div>';
    }
    // document.getElementById('album_content').innerHTML = albums_innerHtml;

    for(var j = 1; j <= bestAlbumJson.length; j++){
        var curRowIdx = Math.ceil(j/5);
        var curDivID = 'album_' + curRowIdx;
        albumContent.innerHTML += '<div ican="true" id="album_list_'+ j +'" class="albumItem" style="background-image:url('+ bestAlbumJson[j-1]['img'] +')"><div class="cover">'+ bestAlbumJson[j-1]['title'] +'</div></div>';
    }
}
/*精选专辑结束*/

function getContainers(){
  var contArrs = new Array();
  for(var i = 0; i < speContainerIDs.length; i++){
    contArrs[i] = document.getElementById(speContainerIDs[i]);
  }
  return contArrs;
}
var containersArr = getContainers();
// 获取当前leftmenu所在的页面
function getLeftMenuPageIdx(){
  for(var pageIdx = 0; pageIdx < speContainerIDs.length; pageIdx++){
    if (containersArr[pageIdx].style.display == "block") {
      return pageIdx;
    }
  }
}


// 总的li的数量
var totalMenuLiNum = speContainerIDs.length;

// document.onkeydown = remoteControl;
var isClickEnter; // 是否按下回车
var curMenuPageId; // 当前leftmenu选中的值
var listDivClassName = ''; // 当前list中焦点的className
var curActiveVideo = new Array(); // 当前右侧焦点对象
var curKey = ''; // 当前的按键
var curSelectedLi; // 记录被选中的menu中的li的id
var curListsTotalNum;// 记录当前详情页右侧list的总数
var contentRows; //左侧内容总行数
var curParentID; //定义当前有焦点的video的父节点ID

function remoteControl(){

    // 获取leftMenu中的li的当前焦点的index
    var curActiveLi = document.getElementsByClassName('left_menu_active');
    var curLiIdx = parseInt(curActiveLi[0].id.replace('leftmenu_li_',''));
    //  记录被选中的menu中的li的id
    curSelectedLi = isClickEnter == 'undefined' ? 1 : curLiIdx;
    // 获取分区中的焦点
    curMenuPageId = getLeftMenuPageIdx();
    listDivClassName = 'videoItem-acti';
    listDivClassName = curMenuPageId == 0 ? 'videoItem-acti' : 'albumItem-acti';

    contentRows = curMenuPageId == 0 ? Math.ceil(allVideoJson.length / 4) : Math.ceil(bestAlbumJson.length / 5);
    curParentID = curMenuPageId == 0 ? 'allVideo_' : 'album_';
    curActiveVideo = document.getElementsByClassName(listDivClassName);

    e=window.event||e;
    switch(e.which){
        case 37: // 左
           /* curKey = 'l';
            // 左侧内容列表中有焦点
            if (curActiveVideo.length != 0) {
                directionKeyFunc();
            }*/
           window.location.href = headerUrls[curPageIdx - 1];
            break;
        case 38: // 上
            curKey = 'u';
            if (curLiIdx != 1 && curActiveVideo.length == 0) { // 只有左边菜单栏有焦点时
              setLeftMenuLi(curLiIdx,(curLiIdx-1),curActiveLi);
              // 侧栏添加选中背景
              setFocus('leftmenu_li_'+curLiIdx,'left_menu_only_focused','leftmenu_li_'+(curLiIdx-1),'left_menu_only_focused',2);
            }else if (curActiveVideo.length != 0) { // 左侧内容列表中有焦点
              directionKeyFunc();
            }
            break; 
        case 39: // 右
            /*curKey = 'r';
            if (curActiveVideo.length == 0) { // 右边video无焦点时
                if(curMenuPageId == 0) {
                    // 所有视频
                    setFocus('','','all_video_list_1',listDivClassName,1);
                    addClass(getObjById('all_video_list_1').parentElement, 'videoList-acti-s');
                    // 焦点移动到之前所在行
                    // var curItem ='all_video_list_' + ((curScrollLineNum-1)*4+1);
                    // setFocus('',curItem,listDivClassName,1);
                    setLeftMenuLi(curSelectedLi,(curMenuPageId+1),curActiveLi);

                }else if (curMenuPageId == 1) {
                    // 精选专辑
                    setFocus('','','album_list_1',listDivClassName,1);
                    addClass(getObjById('album_list_1').parentElement, 'videoList-acti-s');
                    // 焦点移动到之前所在行
                    // var curItem ='album_list_' + ((curScrollLineNum-1)*5+1);
                    // setFocus('',curItem,listDivClassName,1);
                    setLeftMenuLi(curSelectedLi,(curMenuPageId+1),curActiveLi);
                }
                // 移除侧栏焦点背景
                setFocus('leftmenu_li_'+curLiIdx,'left_menu_only_focused','','',0);
            }else {
                removeClass(curActiveVideo[0].parentElement,'videoList-acti-s');
                directionKeyFunc();
            }*/
           window.location.href = headerUrls[curPageIdx + 1];
            break;
        case 40: // 下
            curKey = 'd';
            if (curLiIdx != totalMenuLiNum && curActiveVideo.length == 0) { // 只有左边菜单栏有焦点时
              setLeftMenuLi(curLiIdx,(curLiIdx+1),curActiveLi);
              // 侧栏添加选中背景
              setFocus('leftmenu_li_'+curLiIdx,'left_menu_only_focused','leftmenu_li_'+(curLiIdx+1),'left_menu_only_focused',2);
            }else if (curActiveVideo.length != 0) { // 左侧内容列表中有焦点
              directionKeyFunc();
            }
            break; 
        case 13: // 回车/OK
            isClickEnter == 1;
            if (curActiveVideo.length == 0) { // 只有左边菜单栏有焦点时
            }else{
                if(curLiIdx==1){
                    // 跳转到播放页
                }else{
                    // 跳转到专辑播放页
                    window.location.href="../match/album_play.html";  
                }
            }
            break;
        case 27: // ESC
            window.history.back();
            return false;
            break;             
    }
}



/*
*设置leftmenu的焦点移动
*removeLiIdx:要移除状态的id值
*addLiIdx:要添加状态的id值
*curActiveLi：当前所在列表位置，用于切换内容
*/
function setLeftMenuLi(removeLiIdx,addLiIdx,curActiveLi){
    removeClass(getObjById('leftmenu_li_'+removeLiIdx),'left_menu_active');
    addClass(getObjById('leftmenu_li_'+addLiIdx),'left_menu_active');
    // 切换右侧内容
    var curLiIdx = parseInt(curActiveLi[0].id.replace('leftmenu_li_',''));
    for(var i = 0; i < speContainerIDs.length; i++){
        containersArr[i].style.display = 'none';
    }
    containersArr[curLiIdx-1].style.display = "block";

}

// 上下左右触发事件
function directionKeyFunc(){
    if (curMenuPageId == 0) {//所有视频
      optionRLFunc('all_video_list_',1);
      curListsTotalNum = allVideoJson.length;
    }else if (curMenuPageId == 1) { //精选主播
      optionRLFunc('album_list_',2);
      curListsTotalNum = bestAlbumJson.length;
    }
}


/*
* 焦点在右侧详情页时的按左右键的方法
*
* listIDStr: 当前焦点的id
* curMenuPageType: 当前选中的是menu的哪一个,1：所有视频，2：专辑
*/
function optionRLFunc(listIDStr, curMenuPageType){
    // 当前选中焦点在哪一行
    var curParentIdx = parseInt(curActiveVideo[0].parentElement.id.replace(curParentID,''));
    var curIdx =  parseInt(curActiveVideo[0].id.replace(listIDStr,''));
    var curDivisor = curMenuPageType == 1 ? 4 : 5;

    var curModValue = curKey == 'r' ? 0 : 1;
    var nextCloseIdx;
    if (curKey == 'r' || curKey == 'l') {
        nextCloseIdx = 1;
        if (curIdx % curDivisor != curModValue) {
            var rlCloseIdx = curKey == 'r' ? (curIdx + nextCloseIdx) : (curIdx - nextCloseIdx);
            // 第一列增加特殊样式
            if(rlCloseIdx%curDivisor == 1){
                addClass(curActiveVideo[0].parentElement, 'videoList-acti-s');
            }else{
                removeClass(curActiveVideo[0].parentElement, 'videoList-acti-s');
            }
            setFocus((listIDStr+curIdx),listDivClassName,(listIDStr+rlCloseIdx),listDivClassName,2);
        }
        if ((curIdx % curDivisor == 1) && curKey == 'l') {// 焦点在第一个并向左移动
            setFocus((listIDStr+curIdx),listDivClassName,'','',0);
            // 侧栏添加选中背景
            setFocus('','','leftmenu_li_'+curSelectedLi,'left_menu_only_focused',1);
            removeClass(getObjById(listIDStr+curIdx).parentElement, 'videoList-acti-s');
            // 滚回原位
            scrollPage(0,0,1);
        }
    }else{ //上下
        nextCloseIdx = curMenuPageType == 1 ? 4 : 5;
        var udCloseIdx = curKey == 'd' ? (curIdx + nextCloseIdx) : (curIdx - nextCloseIdx);
        if(curKey == 'd'){ //下
            if(curParentIdx<contentRows){
                 // 其下方div不存在时，移动到最后一行第一个
                if(getObjById(listIDStr+udCloseIdx) == null){
                    udCloseIdx = (Math.ceil(curListsTotalNum / curDivisor)-1)*nextCloseIdx + 1;
                }
            }
            if(curParentIdx != contentRows){
                // 第一列特殊样式
                if(udCloseIdx%curDivisor == 1){
                    removeClass(getObjById(listIDStr+curIdx).parentElement, 'videoList-acti-s');
                    addClass(getObjById(listIDStr+udCloseIdx).parentElement, 'videoList-acti-s');
                }else{
                    removeClass(curActiveVideo[0].parentElement, 'videoList-acti-s');
                }
            }  
        }else{
            if(curParentIdx != 1){
                // 第一列特殊样式
                if(udCloseIdx%curDivisor == 1){
                    removeClass(getObjById(listIDStr+curIdx).parentElement, 'videoList-acti-s');
                    addClass(getObjById(listIDStr+udCloseIdx).parentElement, 'videoList-acti-s');
                }else{
                    removeClass(curActiveVideo[0].parentElement, 'videoList-acti-s');
                }
            }   
        }
        setFocus((listIDStr+curIdx),listDivClassName,(listIDStr+udCloseIdx),listDivClassName,2); 
        scrollPage(udCloseIdx,curMenuPageType,0);
    }
}

/*
 * nextIdx: 焦点要移动到的下一个的idx
 * pageType: 1：所有视频，2：精选专辑
 * isClear: 为1时，右侧内容无焦点，页面回到顶部
 */
function scrollPage(nextIdx,pageType,isClear){
    // 当前要滚动的div的id
    var containerID = firRowIds[curSelectedLi-1];
    // marginTop值
    var scrollMT;
    if (isClear == 1) {
      scrollMT = 0;
    }else {
      // 每次滚动的值
      var scrollVal = curMenuPageId == 0 ? -12.256 : -20.973;
      // 一行4/5个
      var divisor = pageType == 1 ? 4 : 5;
      // 开始滚动的行数
      var firScrollRow = pageType == 1 ? 4 : 3;      
      var nextRow = Math.ceil(nextIdx / divisor);
      if (nextRow >= firScrollRow && nextRow <= contentRows) {
        scrollMT = scrollVal * (nextRow - firScrollRow + 1);
      }else if (nextRow < firScrollRow) {
        scrollMT = 0;
      }
    }
    getObjById(containerID).style.marginTop = scrollMT + 'em';
  }
